<template>
  <div class="vol-index">
    <div class="vol-index-title">
      <img style="width: 35px;height: 35px" src="@/assets/tg.png" />赢客松销售管理系统
    </div>

    <div class="vol-index-contanier">
      <div class="fun">
        <h4 class="title">客户管理</h4>
        <div class="item-group">
          <div
            class="item"
            @click="to(item)"
            v-for="(item, index) in link"
            :key="index"
          >
            <van-icon :style="{ background: item.color }" :name="item.icon" />
            <br />
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
      <div class="fun">
        <h4 class="title">报价/样品管理</h4>
        <div class="item-group">
          <div
            class="item"
            @click="to(item)"
            v-for="(item, index) in doc"
            :key="index"
          >
            <van-icon :style="{ background: item.color }" :name="item.icon" />
            <br />
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
      <div class="fun">
        <h4 class="title">发货/订单</h4>
        <div class="item-group">
          <div
            class="item"
            @click="to(item)"
            v-for="(item, index) in Delivery"
            :key="index"
          >
            <van-icon :style="{ background: item.color }" :name="item.icon" />
            <br />
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon } from "vant";
// import Swipe from "./index/Swipe";
export default {
  components: {
    "van-icon": Icon
    // "swipe-index": Swipe
  },
  data() {
    return {
      queryParam: {},
      link: [
        // { text: "我的客户", icon: "apps-o", path: "/stat", color: "#07e610" },
        { text: "", icon: "", color: "" },
        {
          text: "客户信息",
          icon: "friends",
          path: "/formal",
          color: "#07e610"
        },
        // {
        //   text: "潜在客户",
        //   icon: "user-circle-o",
        //   path: "/potential",
        //   color: "#07e610"
        // },
        {
          text: "沟通记录",
          icon: "comment-o",
          path: "/Communication",
          color: "#07e610"
        }
      ],
      doc: [
        {
          text: "报价",
          icon: "gold-coin-o",
          path: "/price",
          color: "#ff9c0a"
        },
        {
          text: "返料",
          icon: "comment-o",
          path: "/returnMaterial",
          color: "#ff9c0a"
        },
        // {
        //   text: "样品申请",
        //   icon: "todo-list",
        //   path: "/sample",
        //   color: "#ff9c0a"
        // },
        {
          text: "样品",
          icon: "balance-list",
          path: "/mysample",
          color: "#ff9c0a"
        }
      ],
      Delivery: [
        {
          text: "发货通知",
          icon: "bookmark",
          path: "/delivery",
          color: "red"
        },
        {
          text: "发货信息",
          icon: "chat",
          path: "/Information",
          color: "red"
        },

        {
          text: "订单管理",
          icon: "info",
          path: "/order",
          color: "red"
        }
        // {
        //   text: "产品信息",
        //   icon: "fire-o",
        //   path: "/product",
        //   color: "red"
        // }
      ]
    };
  },
  created() {
    // this.getDataList();
  },
  methods: {
    // getDataList() {
    //   this.selectedRowKeys = [];

    //   this.loading = true;
    //   this.http
    //     .post(
    //       "/QuotationManagement/Quot_OfferSheetMain/GetDataListByConditions",
    //       {
    //         PageIndex: 1,
    //         PageRows: 99,
    //         SortField: "Id",
    //         SortType: "asc",
    //         Search: [this.queryParam]
    //       }
    //     )
    //     .then(resJson => {
    //       this.data = resJson.Data;
    //       this.Total = resJson.Data.Total;
    //     });
    // },

    to(item) {
      if (item.path) this.$router.push({ path: item.path });
    }
  }
};
</script>
<style lang="less" scoped>
.vol-index-contanier {
  position: absolute;
  top: 51px;
  bottom: 65px;
  width: 100%;
  overflow: scroll;
}
.vol-index {
  height: 100%;
  background: #f7f7f7;
}
.vol-index-title {
  background: white;
  border-bottom: 1px solid #eee;
  line-height: 50px;
  height: 50px;
  padding-left: 1rem;
  letter-spacing: 1px;
  img {
    position: relative;
    height: 17px;
    top: 5px;
    margin-right: 0.5rem;
  }
}
</style>
<style lang="less" scoped>
.v-success {
  border: 1px solid #8ce6b0;
  background-color: #edfff3;
  position: relative;
  /* padding: 8px 48px 8px 16px; */
  border-radius: 4px;
  color: #515a6e;
  font-size: 14px;
  line-height: 12px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 12px;
  margin: 10px 0;
  color: #404b50;
  letter-spacing: 1px;
}
.fun {
  .title {
    padding: 0 17px;
    margin: 10px 0;
    font-weight: 500;
  }
  .item-group {
    background: white;
    padding: 10px;
    .item {
      text-align: center;
    }
    i {
      margin-bottom: 7px !important;

      line-height: 40px;
      width: 40px;
      text-align: center;

      color: white;
      border-radius: 50%;
      font-size: 23px;
      /* padding: 0; */
      margin: 0;
      position: relative;
      left: 0;
    }
    span {
      font-size: 14px;
    }
    display: flex;

    .item {
      flex: 1;
    }
  }
}
</style>
